<script setup>
import * as echarts from "echarts";
import { assign } from "lodash-es";
import { ref, watchEffect } from "vue";
const props = defineProps(["color", "data", "legend", "title"]);

const chartRef = ref(null);
const data = [
  { value: 44, name: "学前教育" },
  { value: 38, name: "小学" },
  { value: 32, name: "初中" },
  { value: 30, name: "高中" },
  { value: 28, name: "中职" },
  { value: 26, name: "高校" },
  { value: 22, name: "特殊教育" },
  { value: 18, name: "专门教育" },
];
watchEffect(() => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);
  const option = {
    legend: {
      type: "scroll",
      orient: "vertical",
      right: "18%",
      top: 20,
      textStyle: {
        fontSize: 14,
        // fontWeight: "bold",
        color: "rgba(201,233,248,1)",
        rich: {
          name: {
            color: "rgba(201,233,248,0.8)",
            fontSize: 10,
          },
        },
      },
      formatter: (e) => {
        let val = 0;
        data.forEach((el) => {
          if (e == el.name) val = el.value;
        });
        return `${e} ${val}`;
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        // name: "Nightingale Chart",
        type: "pie",
        radius: [10, "97%"],
        center: ["25%", "55%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        label: {
          show: false,
        },
        data: data,
      },
    ],
  };
  chart.setOption(option);
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>
